<script setup>
import { ref, onMounted } from 'vue'
import Header from '@/components/header/Header.vue'
import { Search } from '@element-plus/icons-vue'

// 新建课程时发送的信息
const newClass = ref({
  // 用户键入
  classInfo: {
    className: '',
    stuAmount: 0,
    description: '',
  },
  // 从全局状态中上传当前用户（即创建课程的老师）的信息
  teacherInfo: {}
})

// 页面展示时需要获取的现有课程
const classList = ref([
  {
    className: '深入理解英语系统',
    teacherName: '杜硕',
    id: 'classId1',
    stuAmount: 30,
    description: '这是一门很有趣的课程，老师很有趣，学生也很有趣，课程内容也很有趣。',
    inviteCode: crypto.randomUUID()
  },
  {
    className: '英语科学导论',
    teacherName: '杜硕',
    id: 'classId2',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。',
    inviteCode: crypto.randomUUID()
  },
  {
    className: '高级语言英语设计',
    teacherName: '杜硕',
    id: 'classId3',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。',
    inviteCode: crypto.randomUUID()
  },
  {
    className: '离散英语',
    teacherName: '杜硕',
    id: 'classId4',
    stuAmount: 20,
    description: '这是一门学生很有趣的老师，课程很有趣，也很有趣，课程内容也很有趣。',
    inviteCode: crypto.randomUUID()
  },
])

// 页面加载时需要获取的待处理添加课程请求
const dialogFormVisible = ref(false)
const pendingRequests = ref([
  {
    studentName: '张三',
    studentId: 'studentId1',
    className: '深入理解英语系统',
    classId: 'classId1',
    requestTime: '2021-07-01 12:00:00',
    requestReason: '我想学这门课，老师好厉害，课程内容也很有趣。',
    status: 'pending'
  },
  {
    studentName: '李四',
    studentId: 'studentId2',
    className: '英语科学导论',
    classId: 'classId2',
    requestTime: '2021-07-01 12:00:00',
    requestReason: '我想学这门课，老师好厉害，课程内容也很有趣。',
    status: 'pending'
  },
  {
    studentName: '王五',
    studentId: 'studentId3',
    className: '高级语言英语设计',
    classId: 'classId3',
    requestTime: '2021-07-01 12:00:00',
    requestReason: '我想学这门课，老师好厉害，课程内容也很有趣。',
    status: 'pending'
  },
  {
    studentName: '赵六',
    studentId: 'studentId4',
    className: '离散英语',
    classId: 'classId4',
    requestTime: '2021-07-01 12:00:00',
    requestReason: '我想学这门课，老师好厉害，课程内容也很有趣。',
    status: 'pending'
  },
  
])

// 打开待处理申请
const openPendingRequests = () => {
  dialogFormVisible.value = true
}

const handleAgree = (index, row) => {
  console.log('agree', index, row)
  pendingRequests.value.splice(index, 1)
}

const handleRefuse = (index, row) => {
  pendingRequests.value.splice(index, 1)
}

onMounted(() => {
  console.log('classList', classList)
})

</script>

<template>

  <div class="class-manage-page-container">
    <Header>班级管理</Header>
    <div class="class-manage-page gradint-background">
      <!--我的班级列表-->
      <div class="com-ques-contianer white-plate">
        <div style="display: flex; justify-content: space-between; width: 100%;">
          <h1>我的班级列表</h1>
          <!-- 待处理申请 -->
          <el-badge :value="pendingRequests.length" :max="99" class="item" v-show="pendingRequests.length !== 0">
            <el-button type="danger" plain @click="openPendingRequests">待处理申请</el-button>
            <el-dialog v-model="dialogFormVisible" title="待处理申请">
              <!-- <el-table :data="pendingRequests" style="width: 100%">
                <el-table-column prop="studentName" label="学生姓名" width="100" />
                <el-table-column prop="className" label="加入班级" />
                <el-table-column prop="requestTime" label="申请时间" width="180" />
                <el-table-column prop="requestReason" label="申请原因" width="10" />
                <el-table-column prop="address" label="Address" />
              </el-table> -->
              <el-table :data="pendingRequests" style="width: 100%">
                <el-table-column label="申请时间" width="140">
                  <template #default="scope">
                    <div style="display: flex; align-items: center">
                      <el-icon>
                        <timer />
                      </el-icon>
                      <span style="margin-left: 10px">{{ scope.row.requestTime }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="学生姓名" width="90">
                  <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                      <template #default>
                        <div>姓名: {{ scope.row.studentName }}</div>
                        <div>学号: {{ scope.row.studentId }}</div>
                      </template>
                      <template #reference>
                        <!-- <el-tag>{{ scope.row.studentName }}</el-tag> -->
                      <span>{{ scope.row.studentName }}</span>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="申请加入班级" width="180">
                  <template #default="scope">
                    <span>{{ scope.row.className }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="申请原因" width="200">
                  <template #default="scope">
                    <span>{{ scope.row.requestReason }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button size="nomal" type="success"
                      @click="handleAgree(scope.$index, scope.row)">同意</el-button>
                    <el-button size="normal" type="danger"
                      @click="handleRefuse(scope.$index, scope.row)">拒绝</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">Cancel</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">
                    Confirm
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </el-badge>
        </div>

        <!--模式与搜索-->
        <div class="com-search-container">
          <div style="width: 48%; display: flex; justify-content: space-between">
            <el-select v-model="selectMode" placeholder="Select" style="width: calc(100% - 70px)">
              <el-option v-for="item in selectModeShow" :key="selectModeShow.indexOf(item)" :label="item"
                :value="selectModeShow.indexOf(item)" />
            </el-select>
            <el-button type="primary">更新</el-button>
          </div>
          <div style="width: 48%">
            <el-input v-model="searchDetail" style="width: 100%" placeholder="模糊查询" class="input-with-select">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>

        </div>
        <el-divider style="margin: 4px" />
        <!--习题列表-->
        <div class="scroll-container">
          <el-table stripe :data="currentOpenTestList" style="width: 100%">
            <el-table-column fixed prop="name" label="习题集" width="155" />
            <el-table-column prop="teacherName" label="贡献者" width="110" />
            <el-table-column prop="likeNum" label="点赞" width="100">
              <template #default="scope">
                <div v-if="!scope.row.liked" style="display: flex; align-items: center; cursor: pointer;">
                  <el-icon style="margin-right: 4px;margin-bottom: 2px">
                    <Star />
                  </el-icon> {{ scope.row.likeNum }}
                </div>
                <div v-else style="display: flex; align-items: center; color: #d0be4c">
                  <el-icon style="margin-right: 4px;margin-bottom: 2px">
                    <Star />
                  </el-icon> {{ scope.row.likeNum }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="detail" label="细节" width="500" />
            <el-table-column fixed="right" label="查看" width="80">
              <template #default="scope">
                <el-button @click="checkOpenTest(scope.row.testId)" size="small" type="primary">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination class="test-select" layout="prev, pager, next" page-count="15" />
      </div>
      <!--社区好题-->
      <div class="com-ques-contianer white-plate">
        <h1>xxx班学生列表</h1>
        <!--模式与搜索-->
        <div class="com-search-container">
          <div style="width: 48%; display: flex; justify-content: space-between">
            <el-select v-model="selectMode" placeholder="Select" style="width: calc(100% - 70px)">
              <el-option v-for="item in selectModeShow" :key="selectModeShow.indexOf(item)" :label="item"
                :value="selectModeShow.indexOf(item)" />
            </el-select>
            <el-button type="primary">更新</el-button>
          </div>
          <div style="width: 48%">
            <el-input v-model="searchDetail" style="width: 100%" placeholder="模糊查询" class="input-with-select">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>

        </div>
        <el-divider style="margin: 4px" />
        <!--习题列表-->
        <div class="scroll-container">
          <el-table stripe :data="currentOpenTestList" style="width: 100%">
            <el-table-column fixed prop="name" label="习题集" width="155" />
            <el-table-column prop="teacherName" label="贡献者" width="110" />
            <el-table-column prop="likeNum" label="点赞" width="100">
              <template #default="scope">
                <div v-if="!scope.row.liked" style="display: flex; align-items: center; cursor: pointer;">
                  <el-icon style="margin-right: 4px;margin-bottom: 2px">
                    <Star />
                  </el-icon> {{ scope.row.likeNum }}
                </div>
                <div v-else style="display: flex; align-items: center; color: #d0be4c">
                  <el-icon style="margin-right: 4px;margin-bottom: 2px">
                    <Star />
                  </el-icon> {{ scope.row.likeNum }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="detail" label="细节" width="500" />
            <el-table-column fixed="right" label="查看" width="80">
              <template #default="scope">
                <el-button @click="checkOpenTest(scope.row.testId)" size="small" type="primary">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination class="test-select" layout="prev, pager, next" page-count="15" />
      </div>

    </div>

  </div>


</template>

<style scoped>
.class-manage-page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.class-manage-page{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
}

.com-ques-contianer{
    width: calc(50% - 48px);
    height: calc(100% - 48px);
    margin: 12px;
    padding: 12px;
    animation: right-in .6s 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .com-search-container{
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .com-ques-contianer .scroll-container{
    flex: 0.94;
    width: 100%;
  }
  h1{
    font-size: 19px;
    letter-spacing: 2px;
    width: 100%;
  }
</style>